
<template>
    <el-dialog :model-value="true" :title="props.editType === 'add' ? '新增租户' : '编辑租户'" width="40%" @close="handleClose"> 
      <el-form :model="form" label-width="120px" :rules="rules" ref="formRef">
        <el-form-item label="租户名称" prop="name">
          <el-select v-model="form.name" placeholder="请选择租户名称" :disabled="isEdit" class="!w-240px">
            <el-option label="租户1" value="1" />
            <el-option label="租户2" value="2" />
            <el-option label="租户3" value="3" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="舌诊额度(次数)" prop="tongueDiagnosisLimit">
          <el-input-number v-model.trim="form.tongueDiagnosisLimit" placeholder="请输入舌诊额度" class="!w-240px" :min="1" :max="100000" :controls="false" />
        </el-form-item>
        <el-form-item label="有效期" prop="expiredTime">
          <el-date-picker v-model="form.expiredTime" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择有效期" class="!w-240px" @change="handleExpiredTimeChange" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="flex justify-end">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </div>
      </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref,toRefs,computed } from 'vue'

const props = withDefaults(defineProps<{
  editType: string
  editData?: any
}>(), {
  editType: 'add',
  editData: () => ({}),
})
const emits = defineEmits<{
  (emitStr: 'ok', emitData: any): void;
  (emitStr: 'cancel'): void
}>()
const form = ref({
  name: '',
  tongueDiagnosisLimit: 0,
  expiredTime: ''
})
const isEdit = computed(() => {
  return props.editType === 'edit'
})
const rules = ref({
  name: [{ required: true, message: '请选择租户名称', trigger: 'change' }],
  // 舌诊额度：手动输入，必须是整数，最大输入 100000 
  tongueDiagnosisLimit: [
    { 
      required: true,
       message: '请输入舌诊额度',
       trigger: 'blur',
       validator: (rule: any, value: any, callback: any) => {
        if (!value) {
          callback(new Error('请输入舌诊额度'))
        }
        callback()
      }
     }],
  expiredTime: [{ required: true, message: '请选择有效期', trigger: 'change' }]
})
const formRef = ref()
const handleSave = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      emits('ok', form.value)
    }
  })
}
const handleExpiredTimeChange = (value: string) => {
  console.log(value)
}
const handleClose = () => {
  emits('cancel')
}


</script>

<style scoped lang="scss">

</style>